<template>
    <div>
        <ul class="tab">
            <li v-for="(item,index) in tabList" :key="index" @click="tabIndex = index" :class="{'li-active' : index == tabIndex }">{{item}}</li>
        </ul>

        <template v-if="tabIndex == 0">
            <el-form label-position="right" label-width="80px">
                <el-form-item label="模块标题">
                    <el-input size="small" placeholder="请输入内容" v-model="attributes.title.t"></el-input>
                    <el-checkbox v-model="attributes.title.s">隐藏</el-checkbox>
                </el-form-item>
                <el-form-item label="标题样式">
                    <el-radio-group v-model="attributes.title.d">
                        <el-radio :label="false">默认</el-radio>
                        <el-radio :label="true">自定义</el-radio>
                    </el-radio-group>
                    <CustomText :text="attributes.title" v-if="attributes.title.d"/>
                </el-form-item>

                <el-form-item label="图片设置">
                    <div class="upload show-img" v-if="attributes.content.img.i">
                        <i class="el-icon-close" @click.stop="attributes.content.img.i=''"></i>
                        <img :src="attributes.content.img.i" alt="">
                    </div>
                    <UploadImg v-else @change="changeIconP($event)"/>
                </el-form-item>
                <el-form-item label="文章描述">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" maxlength="50" show-word-limit v-model="attributes.content.text.t"></el-input>
                </el-form-item>
                <el-form-item label="文章字体">
                    <el-radio-group v-model="attributes.content.text.d">
                        <el-radio :label="false">默认</el-radio>
                        <el-radio :label="true">自定义</el-radio>
                    </el-radio-group>
                    <CustomText :text="attributes.content.text" v-if="attributes.content.text.d"/>
                </el-form-item>
            </el-form>
        </template>
        
        <template v-if="tabIndex == 1">
            <el-form label-position="right" label-width="80px">
                <el-form-item label="模块背景">
                    <SetBackground :base="attributes.base"/>
                </el-form-item>
                <el-form-item label="文字颜色">
                    <el-color-picker v-model="attributes.base.fc" size="small"></el-color-picker>
                </el-form-item>
                <el-form-item label="模块样式">
                    <ul class="module-style">
                        <li :class="{'li_active': index == attributes.base.s}" v-for="(item,index) in attributes.base.sc" :key="index" @click="attributes.base.s = index">
                            <img :src="item.p" alt="模块样式">
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="模块间隙">
                    <el-radio-group v-model="attributes.base.m">
                        <el-radio :label="true">显示</el-radio>
                        <el-radio :label="false">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </template>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            tabList:['基础设置','样式设置'],
            tabIndex: 0,
        }
    },
    computed:{
		...mapState(['attributes'])
    },
    methods: {
        // 上传元件图片
        changeIconP(res){
            this.attributes.content.img.i = res
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/attr.scss';

.attr-part{
    .title{height: 40px;border-bottom: 1px solid #eee;padding: 0 10px;box-sizing: border-box;font-size: 14px;color: #666;cursor: pointer;user-select: none;
        .icon-group{.el-button{margin: 0;transform: scale(.8)}}
    }
    /deep/  .el-form-item__label{font-size: 13px}
    .part-upload{font-size: 13px;color: #666}
}
.add_page{width: 329px;margin: 20px auto;}

/deep/ .el-textarea{width: 280px;}

</style>
